<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="规则编号">
                <a-input v-model="queryParam.id" placeholder=""/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="使用状态">
                <a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
                  <a-select-option value="0">全部</a-select-option>
                  <a-select-option value="1">关闭</a-select-option>
                  <a-select-option value="2">运行中</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="8" :sm="24">
                <a-form-item label="调用次数">
                  <a-input-number v-model="queryParam.callNo" style="width: 100%"/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="更新日期">
                  <a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期"/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="使用状态">
                  <a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0">
                    <a-select-option value="0">全部</a-select-option>
                    <a-select-option value="1">关闭</a-select-option>
                    <a-select-option value="2">运行中</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="使用状态">
                  <a-select placeholder="请选择" default-value="0">
                    <a-select-option value="0">全部</a-select-option>
                    <a-select-option value="1">关闭</a-select-option>
                    <a-select-option value="2">运行中</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'"/>
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="handleAdd">新建</a-button>
        <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
            <!-- lock | unlock -->
            <a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px">
            批量操作 <a-icon type="down" />
          </a-button>
        </a-dropdown>
      </div>
      <s-table
          ref="table"
          size="default"
          rowKey="key"
          :columns="columns"
          :data="tbdata"
          :alert="true"
          :rowSelection="rowSelection"
          showPagination="auto"
      >
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <span slot="status" slot-scope="text">
          <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
        </span>
        <span slot="description" slot-scope="text">
          <ellipsis :length="4" tooltip>{{ text }}</ellipsis>
        </span>

        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleEdit(record)">配置</a>
            <a-divider type="vertical" />
            <a @click="handleSub(record)">订阅报警</a>
          </template>
        </span>
      </s-table>
      <step-by-step-modal ref="modal" @ok="handleOk"/>
    </a-card>
  </page-header-wrapper>
</template>

<script setup>


import {onMounted, ref} from "vue";

const columns = [
  {
    title: '#',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '规则编号',
    dataIndex: 'no'
  },
  {
    title: '描述',
    dataIndex: 'description',
    scopedSlots: { customRender: 'description' }
  },
  {
    title: '服务调用次数',
    dataIndex: 'callNo',
    sorter: true,
    needTotal: true,
    customRender: (text) => text + ' 次'
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '更新时间',
    dataIndex: 'updatedAt',
    sorter: true
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]


const statusMap = {
  0: {
    status: 'default',
    text: '关闭'
  },
  1: {
    status: 'processing',
    text: '运行中'
  },
  2: {
    status: 'success',
    text: '已上线'
  },
  3: {
    status: 'error',
    text: '异常'
  }
}

const queryParam = ref({})

const advanced = ref(false);
const visible = ref(false);
const confirmLoading = ref(false);
const mdl = ref({})

const tbdata = ref([
  {
    no:1,
    description:"测试数据",
    callNo:10,
    status:1,
    updatedAt: '2023-03-26 12:12:10'
  }
])

const selectedRowKeys = ref([])
const selectedRows = ref([])
const rowSelection=()=>{
  console.log("测试")
}
const handleAdd = ()=> {
  this.mdl = null
  this.visible = true
}
const handleEdit = (record) =>{
  this.visible = true
  this.mdl = { ...record }
}
const handleOk = ()=> {
  const form = this.$refs.createModal.form
  this.confirmLoading = true
  form.validateFields((errors, values) => {
    if (!errors) {
      console.log('values', values)
      if (values.id > 0) {
        // 修改 e.g.
        new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve()
          }, 1000)
        }).then(res => {
          this.visible = false
          this.confirmLoading = false
          // 重置表单数据
          form.resetFields()
          // 刷新表格
          this.$refs.table.refresh()

          this.$message.info('修改成功')
        })
      } else {
        // 新增
        new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve()
          }, 1000)
        }).then(res => {
          this.visible = false
          this.confirmLoading = false
          // 重置表单数据
          form.resetFields()
          // 刷新表格
          this.$refs.table.refresh()

          this.$message.info('新增成功')
        })
      }
    } else {
      this.confirmLoading = false
    }
  })
}
const handleCancel = ()=> {
  this.visible = false

  const form = this.$refs.createModal.form
  form.resetFields() // 清理表单数据（可不做）
}
const handleSub =(record) =>{
  if (record.status !== 0) {
    this.$message.info(`${record.no} 订阅成功`)
  } else {
    this.$message.error(`${record.no} 订阅失败，规则已关闭`)
  }
}
const onSelectChange =(selectedRowKeys, selectedRows)=> {
  this.selectedRowKeys = selectedRowKeys
  this.selectedRows = selectedRows
}

const toggleAdvanced =()=> {
  this.advanced = !this.advanced
}

const resetSearchForm =() =>{
  this.queryParam = {
    date: moment(new Date())
  }
}
onMounted(async () => {

})

</script>
